<template>
  <div>
    <div class="fade" @click="closeLogin">
    </div>
    <el-card class="box-card login">
      <div slot="header" class="clearfix">
        <span>账号登录</span>
        <i class="el-icon-close" @click="closeLogin"></i>
      </div>
      <div class="login-list">
        <div class="login-item">
          <span class="item-icon"><i class="iconfont icon-icon-test"></i></span>
          <el-input v-model="form.name" placeholder="账号" @keyup.enter.native="getLogin"></el-input>
        </div>
        <div class="login-item">
          <span class="item-icon"><i class="iconfont icon-mima"></i></span>
          <el-input type="password" v-model="form.passw" placeholder="密码" @keyup.enter.native="getLogin"></el-input>
        </div>
        <div class="login-item">
          <el-button type="primary" round @click="getLogin">登录</el-button>
        </div>
        <span class="text-center forget-pass" @click="passwordForget">
          忘记密码?
        </span>
      </div>
    </el-card>
  </div>
</template>

<script>
import { login,selectUserhead } from "@/api/index";
export default {
  data() {
    return {
      form: {
        name: "",
        passw: ""
      }
    };
  },
  components: {},
  methods: {
    closeLogin() {
      this.$store.commit("SET_LOGINSHOW", false);
    },
    passwordForget(){
      this.closeLogin()
      this.$router.push("/password")
    },
    getLogin() {
      console.log(this.form.name + "," + this.form.passw);
      if(this.form.name.length == 0){
        this.$message({showClose: true,message: "登录账号不能为空!",type: "error"});
        return;
      }
      if(this.form.passw.length == 0){
        this.$message({showClose: true,message: "登录密码不能为空!",type: "error"});
        return;
      } 
      login(this.form.name, this.form.passw)
        .then(res => {
          let userInfo = res.data.data;
          let state = res.data.state;
          if (state == "S") {
            this.$message({
              showClose: true,
              message: "登陆成功",
              type: "success"
            });
            this.$store.commit("SET_LOGINTOKEN", 1);
            this.$store.commit("SET_USER",userInfo);
            sessionStorage.setItem("userId",userInfo.userId||"")
            sessionStorage.setItem("accId",userInfo.accId||"")
            sessionStorage.setItem("orgId",userInfo.orgId||"")
            selectUserhead().then(res=>{
              console.log(res.data)
            })
            this.closeLogin();
            location.reload()
          } else {
            this.$message({
              showClose: true,
              message: "登录失败",
              type: "error"
            });
          }
          // console.log(res.data.state);
        })
        .catch(err => {});
      return;
    }
  }
};
</script>
<style lang="less" scoped>
.custom-dz{
  .clearfix {
  color: #e93926;
}
}
.fade {
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 998;
}
.forget-pass {
  font-size: 14px;
  color: #c1c1c1;
  cursor: pointer;
}
.clearfix {
  font-size: 18px;
  color: #15c798;
  display: flex;
  justify-content: space-between;
  align-items: center;
  i{
    font-size: 20px;
    cursor: pointer;
  }
}
.box-card {
  width: 350px;
  height: 320px;
  top: calc(50% - 160px);
  left: calc(50% - 160px);
  border-radius: 10px;
  position: absolute;
  z-index: 999;
}
.login-item {
  display: flex;
  margin-bottom: 20px;
  .el-button {
    width: 100%;
    // background: #15c798;
    height: 46px;
  }
  .el-button--primary {
    // border-color: #15c798;
  }
  .item-icon {
    display: inline-block;
    width: 40px;
    line-height: 46px;
    .iconfont {
      font-size: 20px;
    }
  }
}
</style>
<style lang="less">
.login {
  .el-input__inner {
    border-radius: 20px;
    height: 46px;
  }
  .el-card__body {
    padding: 30px;
  }
}
</style>


